<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BYD - todoList</title>
    <!-- 引入 Vue  -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        body {
            background-color: #e8e8e8;
            margin: 0;
        }
        #app {
            background-color: #fff;
            width: 1000px;
            margin: 0 auto;
            padding: 60px 25px;
            min-height: 100vh;
        }
        .add-form {
            background-color: #fafafa;
            padding: 25px;
        }
        .options-row {
            display: flex;
            align-items: center;
            color: #606266;
            margin-bottom: 10px;
        }
        .options-row div {
            padding: 0 5px;
        }
        .radio-group > label{
            display: block;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 查询模块 -->
        <el-form ref="searchForm" :inline="true" :model="searchForm" label-width="80px">
            <el-form-item label="题目类型">
              <el-select v-model="searchForm.type" placeholder="请选择题目类型" clearable>
                <el-option
                  v-for="item in questionTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="题目描述">
              <el-input v-model="searchForm.name" clearable></el-input>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="primary" @click="add">创建题目</el-button>
            </el-form-item>
        </el-form>

        <!-- 新增模块 -->
        <el-form ref="addForm" class="add-form" :model="addForm" label-width="100px" v-if="showAddModule">
            <el-form-item label="题目ID号">
                <el-input v-model="addForm.id"></el-input>
            </el-form-item>
            <el-form-item label="题目类型">
                <el-select v-model="addForm.type" placeholder="请选择题目类型">
                    <el-option
                        v-for="item in questionTypes"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="题目描述">
                <el-input type="textarea" v-model="addForm.name"></el-input>
            </el-form-item>
            <el-form-item label="选项">
                <!-- 实际项目中，尽量避免使用 index 作为key -->
                <div v-for="(item, index) in addForm.options" :key="index" class="row options-row">
                    <div class="col1">
                        <el-button type="info">分值</el-button>
                    </div>
                    <div class="col2">
                        <el-input v-model="item.value" key="value" placeholder="请输入选项分值"></el-input>
                    </div>
                    <div class="col3">
                        <el-input v-model="item.key" key="key" placeholder="请输入选项内容"></el-input>
                    </div>
                    <div class="col4">
                        <el-button type="danger" @click="delItem(item)">删除</el-button>
                    </div>
                </div>
                <el-button type="success" @click="addItem" style="width: 100%;">添加选项</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="save">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>

        <!-- 展示模块 -->
        <div v-for="(value, key, index) in filterQuestions" :key="index">
            <h3>{{ `${index + 1}、` + getTypeLabel(key) }}</h3>
            <ol>
                <li v-for="item in value" :key="item.id">
                    <h4>{{ item.name }}</h4>
                    <el-radio-group v-model="item.selectValue" size="small" class="radio-group">
                        <el-radio v-for="optionItem in item.options" :label="optionItem.value" >{{ optionItem.key }}</el-radio>
                    </el-radio-group>
                </li>
            </ol>
        </div>
    </div>
</body>

<script>
    new Vue({
      el: '#app',
      data: () => {
        return {
            // 是否打开新增模块
            showAddModule: false,
            // 搜索条件
            searchForm: {
                type: '',
                name: ''
            },
            // 新增条件
            addForm: {
                id: '',
                type: '',
                name: '',
                options: []
            },
            // 问题类型
            questionTypes: [
                {
                    value: '1',
                    label: '变革创新'
                },
                {
                    value: '2',
                    label: '规章制度'
                },
                {
                    value: '3',
                    label: '信息安全'
                },
            ],
            // 问题列表
            questions: [
                {
                    id: 'A01',
                    type: '1',
                    name: '有危机意识，能够明锐的发现组织、项目中存在的问题和潜在的风险。',
                    options: [
                        {
                            key: 'A、卓越',
                            value: 20
                        },
                        {
                            key: 'B、优秀',
                            value: 16
                        },
                        {
                            key: 'C、良好',
                            value: 12
                        },
                        {
                            key: 'D、一般',
                            value: 8
                        },
                    ]
                },
                {
                    id: 'A02',
                    type: '3',
                    name: '关于防火墙的描述不正确的是',
                    options: [
                        {
                            key: 'A、防火墙不能防止内部攻击',
                            value: 20
                        },
                        {
                            key: 'B、如果一个公司信息安全制度不明确，拥有再好的防火墙也没有用',
                            value: 16
                        },
                        {
                            key: 'C、防火墙可以防止伪装成外部信任主机的IP地址欺骗',
                            value: 12
                        },
                        {
                            key: 'D、防火墙可以防止伪装成内部信任主机的IP地址欺骗',
                            value: 8
                        },
                    ]
                },
                {
                    id: 'A03',
                    type: '3',
                    name: '对影响业务的故障，有应急预案的要求在多少分钟之内完成预案的启动？',
                    options: [
                        {
                            key: 'A、10分钟',
                            value: 20
                        },
                        {
                            key: 'B、15分钟',
                            value: 16
                        },
                        {
                            key: 'C、20分钟',
                            value: 12
                        },
                        {
                            key: 'D、30分钟',
                            value: 8
                        },
                    ]
                }
            ],
            filterQuestions: []
        }
      },
      created() {
        this.search()
      },
      methods: {
        search() {
            const { type, name } = this.searchForm
            const filterData = this.questions.filter(item => (!type || item.type === type) && (!name || item.name.includes(name))) || []

            // 对过滤好的题目按照题目类型进行分组
            const arr = {}
            filterData.forEach((item, index) => {
                if (arr[item.type]) {
                    arr[item.type].push(item)
                } else {
                    arr[item.type] = [item]
                }
            })
            this.filterQuestions = arr

        },
        add() {
            this.showAddModule = true
        },
        addItem() {
            this.addForm.options.push({
                key: '',
                value: ''
            })
        },
        delItem(list){
            this.addForm.options = this.addForm.options.filter(item => !(item.label === list.label && item.value === list.value))
        },
        save() {
            // 校验输入内容
            const { id, type, name, options } = this.addForm
            if (!id || !type || !name || !options.length) {
                return this.$message.error('请输入完整的信息')
            }
            this.questions.push({
                id, type, name, options
            })
            this.showAddModule = false
            this.search()
        },
        cancel() {
            this.showAddModule = false
            // 清空数据
            this.addForm = {
                id: '',
                type: '',
                name: '',
                options: []
            }
        },
        getTypeLabel(value) {
            const curItem = this.questionTypes.find(item => +item.value === +value) || {}
            console.log('curItem', curItem, value, this.questionTypes)
            return curItem.label
        }
      }
    })
</script>
</html>